<script setup>
import { ref } from 'vue'
import useUserInfoStore from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();

const userInfo = ref({...userInfoStore.info})
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>基本资料</span>
      </div>
    </template>
    <el-row>
      <!-- 根据角色判断显示内容 -->
      <el-col :span="12" v-if="userInfo.role === 'student'">
        <div class="info-item">
          <span class="label">学号:</span>
          <el-tag>{{ userInfo.account }}</el-tag>
        </div>
        <div class="info-item">
          <span class="label">姓名:</span>
          <el-tag>{{ userInfo.userName }}</el-tag>
        </div>
      </el-col>
      <el-col :span="12" v-else>
        <div class="info-item">
          <span class="label">工号:</span>
          <el-tag>{{ userInfo.account }}</el-tag>
        </div>
        <div class="info-item">
          <span class="label">姓名:</span>
          <el-tag>{{ userInfo.userName }}</el-tag>
        </div>
        <div class="info-item">
          <span class="label">是否为管理员:</span>
          <el-tag v-if="userInfo.role == 1" type="success">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped>
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.label {
  font-weight: bold;
  margin-right: 10px;
}
</style>